<template>
	<view class="root">
		<view class="circle-1"></view>
		<view class="circle-2"></view>
		<view class="circle-3"></view>
		<view class="circle-4"></view>
		<view class="titlebox">
			<view class="top">
				<text>欢迎来到</text>
			</view>
			<view class="title">
				<text>小逸睛灵</text>
			</view>
		</view>
		<view class="btn" @click="jump">
			<text>进入</text>
			<view class="icon">
				<view class="arrow"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue";
import {PiniaStore} from "@/store";
const store=PiniaStore();

const jump = () => {
	uni.setStorageSync('isFirst', true)
	uni.redirectTo({
		url: '/pages/main/index'
	})
}


</script>

<style lang="less" scoped>
.root{
	height: 100vh;
	background: linear-gradient( 135deg, #5DC16A 0%, #23B888 100%);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.titlebox{
		.top{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 63rpx;
			color: #FFFFFF;
			font-family: PingFangSC, PingFang SC;
			letter-spacing: 4rpx;
			font-style: normal;
			margin-bottom: 30rpx;
		}
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 105rpx;
			color: #FFFFFF;
			letter-spacing: 8rpx;
		}
	}
	.btn{
		position: absolute;
		right: 32rpx;
		bottom: 89rpx;
		background-color: #fff;
		border-radius: 72rpx;
		padding: 16rpx 35rpx 16rpx 84rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 42rpx;
		color: #2FBA82;
		letter-spacing: 4rpx;
		column-gap: 7rpx;
		.icon{
			width: 72rpx;
			height: 2rpx;
			background-color: #26B987;
			position: relative;
			.arrow{
				width: 16rpx;
				height: 16rpx;
				background: linear-gradient( 45deg, transparent 0%, transparent 50%,#26B987 50%, #26B987 100%);
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto 0;
				transform: rotateZ(45deg);
			}
		}
		
	}
	.circle-1{
		width: 501rpx;
		height: 501rpx;
		background-color: rgba(255, 255, 255, 0.39);
		position: absolute;
		top: 14rpx;
		left: -236rpx;
		border-radius: 50%;
	}
	.circle-2{
		width: 377rpx;
		height: 377rpx;
		background-color: rgba(255, 255, 255, 0.29);
		position: absolute;
		top: 478rpx;
		right: -172rpx;
		border-radius: 50%;
	}
	.circle-3{
		width: 293rpx;
		height: 293rpx;
		background-color: rgba(255, 255, 255, 0.49);
		position: absolute;
		bottom: 244rpx;
		left: 0;
		border-radius: 50%;
	}
	.circle-4{
		width: 293rpx;
		height: 293rpx;
		background-color: rgba(255, 255, 255, 0.19);
		position: absolute;
		bottom: -174rpx;
		left: 154rpx;
		border-radius: 50%;
	}
}
</style>
